<template>
    <div class="scroll-container-wrapper" ref="scrollContainer" @mousedown="handleMouseDown" @mouseleave="handleMouseLeave" @mouseup="handleMouseUp" @mousemove="handleMouseMove" @touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchmove="handleTouchMove">
        <div v-for="(item,index) in courseList" :key="index" class="small-box" >
            <div class="course-img-box" >
                <img src="../../../../assets/smart/图1.png" style="width: 100%; border-top-left-radius: 10px;border-top-right-radius: 10px;">
<!--                <div class="course-status"  :class="getStatusClass('required')">{{ getStatusText('required')}}</div>-->
            </div>

          <div class="course-title" style="padding: 0 20px;">{{item.studyCourseName}}</div>

          <div class="flex align-end justify-content-space-between " style="margin-top: 10px;padding: 0 20px;">
            <div style="position: relative;box-sizing: border-box" class="flex-auto">
               <div class="flex align-center">
                 <img style="width:18px;margin-right: 5px" src="../../../../assets/smart/学时.png">
                 <div class="val">学时: {{item.predictTimeCount}}小时</div>
                 <img style="width:18px;margin-right: 10px;margin-left: 20px" src="../../../../assets/smart/人数.png" >
                 <div class="val">{{item.studyUserInfoCount}}人学习</div>
               </div>
               <el-progress :percentage="Number(item.studyProgress)" color="#ff0000" :stroke-width="8">
                <template #default>
                 <div style="height: 60px">
                   <div v-if="item.studyProgress > 0" class="progress-text" style="bottom: -3px;left: 0;margin-top: 20px;font-size: 14px">已完{{item.studyProgress}}%</div>
                   <div v-else class="progress-text" style="bottom: -3px;left: 0;margin-top: 20px;font-size: 14px">未开始学习</div>
                 </div>
                </template>
              </el-progress>
            </div>
            <el-button type="primary" style="position: relative;top: -15px">{{item.progress > 0?"继续学习":"开始学习"}}</el-button>
          </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const props = defineProps({
  courseList: {
    type: Array,
    default: []
  },
  showScrollIndicator: {
    type: Boolean,
    required: true
  }
});
// 根据状态获取对应的类名
const getStatusClass = (status) => {
  switch(status) {
    case 'required':
      return 'status-required';
    case 'optional':
      return 'status-optional';
    case 'new':
      return 'status-new';
    default:
      return '';
  }
};
// 根据状态获取对应的文本
const getStatusText = (status) => {
  switch(status) {
    case 'required':
      return '必修课程';
    case 'optional':
      return '选修课程';
    case 'new':
      return '新课程';
    default:
      return '';
  }
};
// 容器引用
const scrollContainer = ref(null);
const progressPercent = ref(80);
// 状态变量
const state = reactive({
  isDragging: false,
  startX: 0,
  scrollLeft: 0,
  touchStartX: 0,
  touchScrollLeft: 0
});
// 鼠标事件处理
const handleMouseDown = (e) => {
  if (!scrollContainer.value) return;
  state.isDragging = true;
  state.startX = e.pageX - scrollContainer.value.offsetLeft;
  state.scrollLeft = scrollContainer.value.scrollLeft;
  scrollContainer.value.style.cursor = 'grabbing';
};
const handleMouseLeave = () => {
  if (!scrollContainer.value) return;

  state.isDragging = false;
  scrollContainer.value.style.cursor = 'grab';
};
const handleMouseUp = () => {
  if (!scrollContainer.value) return;

  state.isDragging = false;
  scrollContainer.value.style.cursor = 'grab';
};
const handleMouseMove = (e) => {
  if (!state.isDragging || !scrollContainer.value) return;

  e.preventDefault();
  const x = e.pageX - scrollContainer.value.offsetLeft;
  const walk = (x - state.startX) * 1.5;
  scrollContainer.value.scrollLeft = state.scrollLeft - walk;
};
// 触摸事件处理
const handleTouchStart = (e) => {
  if (!scrollContainer.value) return;

  state.touchStartX = e.touches[0].pageX - scrollContainer.value.offsetLeft;
  state.touchScrollLeft = scrollContainer.value.scrollLeft;
};
const handleTouchEnd = () => {
  state.touchStartX = 0;
};
const handleTouchMove = (e) => {
  if (!state.touchStartX || !scrollContainer.value) return;

  const x = e.touches[0].pageX - scrollContainer.value.offsetLeft;
  const walk = (x - state.touchStartX) * 1.5;
  scrollContainer.value.scrollLeft = state.touchScrollLeft - walk;
};
</script>

<style scoped lang="scss">
.scroll-container-wrapper {
  width: 100%;
  overflow-x: auto;
  cursor: pointer;
  display: flex;
  gap: 20px;
  padding: 0 20px;
  margin-left: -20px;
.small-box {
  height: 100%;
  width:390px;
  flex-shrink: 0;
  border: 2px solid #F0F1F4;
  padding-bottom: 20px;
  border-radius: 10px;
  .course-img-box{

    position: relative;
    //background-image: url("https://pic.rmb.bdstatic.com/bjh/240403/material/156d40e73d2b17314acd48742226814e6124.jpeg");
    //background-size: cover; /* 背景图覆盖容器，保持比例 */
    //background-position: center; /* 背景图居中显示 */
    //background-repeat: no-repeat; /* 背景图不重复 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    .course-status{
      border-radius: 5px;
      padding: 5px 10px;
      position: absolute;
      top: 20px;
      right: 15px;
      background-color: #FFFFFF;
      font-size: 13px;
      color: #FFFFFF;
      &.status-required {
        background-color: #E53E3E; /* 红色 */
      }
      &.status-optional {
        background-color: #22C55E; /* 绿色 */
      }
      &.status-new {
        background-color: #3B82F6; /* 蓝色 */
      }
    }
  }
  .course-title{
     font-size: 18px;
     color: #333333;
     font-weight: bolder;
     margin-top: 20px;
  }
  .icon{
     width: 30px;
     height: 30px;
     border: 1px solid red;
     margin-right: 5px;
  }
  .val{
      font-size: 14px;
      color: #999999;
  }
}
}


/* 自定义文字容器样式 */
.progress-text {
  position: absolute;
}



</style>
